import React, { Component } from 'react';
import actions from '../store/actions/saga';
import { connect } from 'react-redux';
import Router, { withRouter } from 'next/router';
import Link from 'next/link';
import { Pagination } from 'antd';

import css from '../styles/saga.scss';
/* const events = [
    'routeChangeStart',
    'routeChangeComplete',
    'routeChangeError',
    'beforeHistoryChange',
    'hashChangeStart'
];
function makeEvents(type) {
    return (...args) => console.log(type, ...args);
}
events.forEach(event => Router.events.on(event, makeEvents(event))); */

const handleRouteChange = url => {
    console.log('App is changing to: ', url);
};

Router.events.on('routeChangeStart', handleRouteChange);

@withRouter
@connect(
    state => state.saga,
    actions
)
class Saga extends Component {
    constructor(props) {
        super(props);
        this.state = {
            current: 1,
            total: 50
        };
    }
    static async getInitialProps(context) {
        console.log('数据仓库');
        console.log(context);
        const { store, isServer, router, query } = context;

        const id = query.id || 509;
        const page = query.page || 1;
        await store.dispatch(actions.fetchNewsType());
        await store.dispatch(actions.fetchNewsList(id, page));
        return { isServer, id, page };
    }
    //分页
    handlePagination = current => {
        const { id } = this.props;
        Router.push(`/saga/${id}/${current}`);
    };
    render() {
        console.log('数据');
        console.log(this.props);

        const {
            sagaNewsType,
            sagaNewsList,
            isFetching,
            newsListError,
            id,
            page
        } = this.props;
        const { total } = this.state;

        return (
            <div className={css.saga}>
                <ul className={css.tabs}>
                    {sagaNewsType &&
                        sagaNewsType.map((item, index) => (
                            <li
                                key={item.typeId}
                                className={`${
                                    item.typeId == id ? css.active : ''
                                }`}>
                                <Link
                                    href={`/saga?id=${item.typeId}`}
                                    as={`/saga/${item.typeId}`}>
                                    <span>{item.typeName}</span>
                                </Link>
                            </li>
                        ))}
                </ul>
                {isFetching && <div>加载中…</div>}
                {!isFetching && (
                    <div>
                        <ul className={css.list}>
                            {sagaNewsList &&
                                sagaNewsList.map((item, index) => (
                                    <li key={item.newsId}>
                                        <Link
                                            href={`/detail?id=${item.newsId}`}
                                            as={`/detail/${item.newsId}`}>
                                            <a>
                                                {index + 1}、{item.title}
                                            </a>
                                        </Link>
                                    </li>
                                ))}
                        </ul>
                        <Pagination
                            size="small"
                            onChange={this.handlePagination}
                            current={Number(page)}
                            total={total}
                        />
                    </div>
                )}
                {newsListError}
            </div>
        );
    }
}
// export default connect(state => state)(Saga);
export default Saga;
/* const mapStateToProps = state => ({
    topics: state.topics
});
const mapDispatchToProps = dispatch => ({
    fetchTopic: params => dispatch(actions.fetchTopic(params))
});
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Saga);
 */
